﻿@page "/"
@attribute [StreamRendering(true)]

@inject CatalogServiceClient CatalogService

<PageTitle>Aspire Shop Product Catalog</PageTitle>

<header class="d-flex align-items-center justify-content-center">
    <h1 class="app-name pa-4">&lt;AspireShop /&gt;</h1>
    <div class="flex-spacer"></div>
    <h2 class="text-align-center">Product Catalog</h2>
    <div class="flex-spacer"></div>
    <Cart BasketAvailabilityChanged="HandleBasketAvailabilityChanged" />
</header>

<div class="container">
    @if (catalog is { Data: var data })
    {
        <div class="grid">
            @foreach (var item in data)
            {
                <div class="grid-item" data-id="@item.Id">
                    <div class="grid-item-content">
                        <img src="catalog/images/@item.Id" alt="@item.Name" class="catalog-item-image" />
                        <div class="quick-view-overlay">
                            <i class="fa fa-search-plus" aria-hidden="true"></i>
                        </div>
                        <div class="grid-item-text">
                            <h4 class="pointer-events-none">@item.Name</h4>
                            <p class="item-description pointer-events-none">@item.Description</p>
                            <div class="d-flex justify-space-evenly align-items-center">
                                <p class="item-price pointer-events-none">@item.Price.ToString("C")</p>
                                @if (basketIsAvailable)
                                {
                                    <AddToCart Item="item" />
                                }
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>

        <div class="pager">
            <a class="previous button" disable=@(paginationInfo.HasPreviousPage is false) href="?before=@paginationInfo.FirstId">
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
                Previous
            </a>

            <a class="next button" disable=@(paginationInfo.HasNextPage is false) href="?after=@paginationInfo.NextId">
                Next
                <i class="fa fa-arrow-right" aria-hidden="true"></i>
            </a>
        </div>
    }
    else
    {
        <p class="catalog-loading">Loading product catalog…</p>
    }
</div>

<AppFooter />

@code {
    bool basketIsAvailable;
    CatalogItemsPage? catalog;
    PaginationInfo paginationInfo = new(FirstId: 0, NextId: 0, HasPreviousPage: false, HasNextPage: false);

    [SupplyParameterFromQuery]
    public int? Before { get; set; }

    [SupplyParameterFromQuery]
    public int? After { get; set; }

    protected override async Task OnInitializedAsync()
    {
        catalog = await CatalogService.GetItemsAsync(Before, After);

        if (catalog is null)
        {
            return;
        }

        paginationInfo = new PaginationInfo(catalog.FirstId, catalog.NextId, catalog.FirstId > 1, !catalog.IsLastPage);
    }

    private void HandleBasketAvailabilityChanged(bool isAvailable)
    {
        basketIsAvailable = isAvailable;
    }

    record PaginationInfo(int FirstId, int NextId, bool HasPreviousPage, bool HasNextPage);
}
